<template>
    <el-form :model="form_active3" label-width="120px">
        <el-form-item label="属性类别：">
            <el-select @change="find" v-model="form_active3.brandId" value-key="id" placeholder="Select">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
            </el-select>
        </el-form-item>
        <el-form-item label="商品规格：">
            <el-card class="box-card" shadow="never">
                <ul v-show="options.length">
                    <li v-for="item in tabList">
                        <div class="name">{{ item.name }}</div>
                        <div v-if="form_active3.productAttributeValueList.length">
                            {{ form_active3.productAttributeValueList }}
                        </div>
                        <input type="text" v-model="tabData">
                        <button @click="onAdd">添加</button>
                    </li>
                </ul>
            </el-card>
        </el-form-item>
        <el-form-item>
            <template #default="{ row }">
                <el-table :data="row" border style="width: 100%" lazy>
                    <el-table-column label="销售价格" />
                    <el-table-column label="商品库存" />
                    <el-table-column label="库存预警值" />
                    <el-table-column label="SKU编号" />
                    <el-table-column label="操作" />
                </el-table>

                <el-button style="margin-top: 12px" type="primary">刷新价格</el-button>
                <el-button style="margin-top: 12px" type="primary">同步价格</el-button>
                <el-button style="margin-top: 12px" type="primary">同步库存</el-button>
            </template>
        </el-form-item>
        <el-form-item label="商品参数：">
            <el-card class="box-card" shadow="never">

            </el-card>
        </el-form-item>
        <el-form-item label="商品相册：">
            <el-upload ref="upload" v-model:file-list="fileList" :auto-upload="false" :limit="1" :on-exceed="handleExceed"
                :on-change="handleChange" list-type="picture-card">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="规格参数：">
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="电脑端详情" name="first">
                    <Editor @getEditor="getEditor" />
                </el-tab-pane>
                <el-tab-pane label="移动端详情" name="second">移动端详情</el-tab-pane>
            </el-tabs>
        </el-form-item>
        <el-form-item>
            <el-button style="margin-top: 12px" @click="previous">上一步，填写商品信息</el-button>
            <el-button style="margin-top: 12px" @click="next" type="primary">下一步，填写商品促销</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UploadRawFile, type TabsPaneContext, type UploadProps, type UploadUserFile, ElMessage, UploadInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import Editor from "./Editor.vue"
import * as http from "@/request/http"
import { useToPro } from "@/store/AddToPro"

const useAddToPro = useToPro()

const emits = defineEmits<{
    (e: "next"): void
    (e: "previous"): void
}>()


const options = ref<CategoryList[]>([])
http.productCategory.categoryList(1, 100).then(res => {
    options.value = res.data.list
})

const form_active3 = ref({
    brandId: {} as CategoryList, //类别
    productAttributeValueList: [] as string[], // 商品规格
    pic: "",//存图片的
    detailHtml: "", // 富文本
})

const getEditor = (val: string) => {
    form_active3.value.detailHtml = val
}

const tabList = ref<RoleEditList[]>([])

const tabData = ref("")

const fileList = ref<UploadUserFile[]>([])

const upload = ref<UploadInstance>(); // 获取el-upload的DOM

const handleExceed: UploadProps["onExceed"] = (files) => {
    upload.value!.clearFiles(); // clearFiles 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
    const file = files[0] as UploadRawFile; // 拿到最新上传的文件
    upload.value!.handleStart(file); // handleStart 手动选择文件
};

const handleChange: UploadProps['onPreview'] = async (
    uploadFile
) => {
    const backupFileList = [...fileList.value]; // 备份已上传的文件，在新上传文件不符合要求的情况下，可以将以上传的文件重新赋值给文件列表
    const { type, size } = uploadFile.raw as UploadRawFile;
    const validTypes = ["image/jpeg", "image/jpg", "image/png"];
    const maxSize = 100 * 1024; // 单位byte
    if (!validTypes.includes(type) || size > maxSize) {
        ElMessage.error("只能上传jpg/png文件，且不超过100kb!");
        fileList.value = backupFileList; // 在新上传文件不符合要求的情况下，可以将以上传的文件重新赋值给文件列表
        return;
    }
    // 将文件通过接口给后端换取文件链接地址
    const formData = new FormData();
    formData.append("file", uploadFile.raw as UploadRawFile);
    http.minio.minioUpload(formData).then(res => {
        form_active3.value.pic = res.data.url
    })
};

const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const find = () => {
    http.productCate.productAttributeList({
        pageNum: 1,
        pageSize: 100,
        type: 0,
        cid: form_active3.value.brandId.id
    }).then(res => {
        tabList.value = res.data.list
    })
    http.productCate.productAttributeList({
        pageNum: 1,
        pageSize: 100,
        type: 1,
        cid: form_active3.value.brandId.id
    }).then(res => {
        tabList.value = res.data.list
    })
}

const onAdd = () => {
    form_active3.value.productAttributeValueList.push(tabData.value)
}

const previous = () => {
    emits("previous")
}

const next = () => {
    console.log(form_active3);
    useAddToPro.PushData(form_active3.value)
    emits("next")
}
</script>

<style scoped lang="less">
.box-card {
    width: 100%;
    background-color: #ececec;
}

ul {
    list-style: none;
}
</style>